<template>
  <div class="app-container">
    <loadings :loading="loading">
      <div>
        <el-row>
          <el-col>
            <el-card shadow="never">
              <div>
                <el-form ref="form" :model="ruleForm" label-width="80px"
                         size="mini" style="float: left">
                  <el-form-item label="产品名称" prop="productName">
                    <el-select v-model="ruleForm.pName" placeholder="请选择产品名称" style="width: 180px" size="mini"
                               @change="changeType">
                      <el-option v-for="item in options" :key="item.id" :label="item.productName"
                                 :value="item.productName" size="mini"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
              <div>
                <div>
                  <el-table
                    border
                    style="height: 100%"
                    size="mini"
                    :data="tableData.slice((page_index-1)*page_size,page_index*page_size)"
                    :header-cell-style="{background:'#f6f6f6'}">
                    <el-table-column
                      fixed
                      prop="createTime"
                      label="报告日期"
                      width="150">
                    </el-table-column>
                    <el-table-column
                      prop="productName"
                      label="产品名称"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="appVersion"
                      label="应用版本"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      prop="apkPackageName"
                      label="应用包名"
                      width="260">
                    </el-table-column>
                    <el-table-column
                      prop="runningMinute"
                      label="遍历时长(分钟)"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="coverage"
                      label="覆盖率"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="crashCount"
                      label="Crash数量"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="deviceName"
                      label="设备名称"
                      width="260">
                    </el-table-column>
                    <el-table-column
                      prop="deviceId"
                      label="设备ID"
                      width="260">
                    </el-table-column>
                    <el-table-column
                      fixed="right"
                      label="操作"
                      width="100">
                      <template slot-scope="scope">
                        <el-button @click="checkLog(scope.row)" type="text" size="small" :disabled="false">查看报告
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
              <div>
                <div>
                  <page :total="page_total" @pageChange="pageChange"></page>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </loadings>
  </div>
</template>

<script>
import Page from "@/components/FastBot/Page";
import ELoading from "@/components/FastBot/ELoading";

export default {
  data() {
    return {
      loading: false,
      page_total: undefined,
      page_index: 1, //页码
      page_size: 15, //每页展示条数
      options: [],
      ruleForm: {
        pName: ''
      },
      tableData: []
    }
  },
  created() {
    this.getReportList()
    this.getProduct()
  },
  components: {
    page: Page,
    loadings: ELoading
  },
  methods: {
    getProduct() {
      this.get('/api/fastbot/getProduct', '', function (resp) {
        this.options = resp.result
      })
    },
    getReportList() {
      this.loading = true
      this.get('/api/fastbot/getReportList', '', function (resp) {
        this.page_total = resp.result.length
        this.tableData = resp.result
        this.loading = false
      }, err => {
        this.loading = false
      })
    },
    checkLog(row) {
      console.log(row);
      this.goRoute(`reportlog/${row.id}`)
    },
    changeType() {
      this.get('/api/fastbot/getReportProduct?productName=' + this.ruleForm.pName, '', function (resp) {
        this.page_total = resp.result.length
        this.tableData = resp.result
      })
    },
    pageChange(item) {
      console.log("pageone:", item);
      this.page_index = item.currentPage
      this.page_size = item.pageSize
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table {
  width: 100%;

  .el-table__header-wrapper table, .el-table__body-wrapper table {
    width: 100% !important;
  }

  .el-table__body, .el-table__footer, .el-table__header {
    table-layout: auto;
  }
}
</style>
